<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="static/js/echarts-gl.min.js"></script>
    <script src="static/js/jquery.min.js"></script>
</head>

<body>
    <a href="/">Return</a>
    <br>
    <br>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="canvas" style="width: 1000px;height:550px;"></div>
    <script type="text/javascript">
        $.getJSON("static/data/year-tracks-and-sales.json", d => {
            console.log(d)
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('canvas'), 'light');

            var colors = ['#5793f3', '#d14a61', '#675bba'];

            option = {
                title: {
                    text: '近20年的专辑数量和单曲数量的变化趋势',
                    padding: [1, 0, 0, 15]
                    // subtext: '该图显示了从2000年到2019年发行的专辑数量和单曲数量的变化趋势，从图中可以看出，专辑数量变化很小，基本稳定在5000左右；单曲数量有轻微的波动，大概为专辑数量的10倍。'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['单曲数量', '专辑数量'],
                    padding: [2, 0, 0, 0]
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: d['years'],
                    boundaryGap: ['20%', '20%']
                },
                yAxis: {
                    type: 'value',
                    // type: 'log',
                    axisLabel: {
                        formatter: '{value}'
                    }
                },
                series: [
                    {
                        name: '单曲数量',
                        type: 'bar',
                        data: d['tracks'],
                        barWidth: 15,
                    },
                    {
                        name: '专辑数量',
                        type: 'bar',
                        data: d['albums'],
                        barGap:  '-100%',
                        barWidth: 15,
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

        })
    </script>
</body>
</html>